@charset "utf-8";
@import "commom/reset";
@import "commom/common";
.web {
    header {
        padding-top: r(48px);
        text-align: center;
        .back {
            margin-left: r(23px);
            a {
                display: block;
                font-size: r(32px);
                color: #000000;
                width: r(123px);
                height: r(57px);
                border: r(3px) solid $color;
                border-radius: r(20px);
                text-align: center;
            }
        }
        .city {
            margin-top: 0;
        }
        .title {
            font-size: r(26px);
            line-height: r(56px);
        }
    }
    main {
        width: 100%;
        overflow-y: scroll;
        position: absolute;
        top: r(120px);
        bottom: r(155px);
        .nav {
            width: 100%;
            ul {
                padding: 0 r(27px);
                li {
                    display: block;
                    float: left;
                    padding-right: r(31px);
                    &:last-child {
                        padding: 0;
                    }
                    a {
                        display: block;
                        text-align: center;
                        img {
                            display: block;
                            width: r(150px);
                            height: r(150px);
                            border-radius: 50%;
                        }
                        span {
                            display: block;
                            font-size: r(26px);
                            margin-top: r(9px);
                            color: #000000;
                        }
                    }
                }
            }
            .point {
                text-align: center;
                span {
                    display: inline-block;
                    width: r(18px);
                    height: r(18px);
                    border-radius: 50%;
                    background-color: #ffc9a1;
                    &:first-child {
                        background-color: $color;
                    }
                }
            }
        }
        .food {
            width: 100%;
            padding-top: r(34px);
            padding-bottom: r(5px);
            .food_left {
                vertical-align: middle;
                img {
                    vertical-align: middle;
                    width: r(56px);
                    height: r(44px);
                    margin-left: r(21px);
                }
                span {
                    font-size: r(30px);
                    vertical-align: middle;
                    margin-left: r(8px);
                }
            }
            .food_right {
                vertical-align: middle;
                img {
                    width: r(25px);
                    height: r(26px);
                    vertical-align: middle;
                    margin-right: r(21px);
                }
                span {
                    font-size: r(24px);
                    vertical-align: middle;
                }
            }
        }
        .food_list{
            ul{
                padding: 0 r(22px);
                margin-top: r(37px);
                margin-bottom: r(35px);
                li{
                    float: left;
                    margin-right:r(55px);
                    &:last-child{
                        margin: 0 ;
                    }
                    a{
                        width: r(135px);
                        height: r(135px);
                        display: block;
                        img{
                            width: 100%;
                        }
                    }
                }
            }
        }
        .sport {
            width: 100%;
            padding-top: r(34px);
            padding-bottom: r(5px);
            .sport_left {
                vertical-align: middle;
                img {
                    vertical-align: middle;
                    width: r(47px);
                    height: r(58px);
                    margin-left: r(21px);
                }
                span {
                    font-size: r(30px);
                    vertical-align: middle;
                    margin-left: r(8px);
                }
            }
            .sport_right {
                vertical-align: middle;
                img {
                    width: r(25px);
                    height: r(26px);
                    vertical-align: middle;
                    margin-right: r(21px);
                }
                span {
                    font-size: r(24px);
                    vertical-align: middle;
                }
            }
        }
        .sport_list{
            ul{
                padding: 0 r(22px);
                margin-top: r(37px);
                margin-bottom: r(35px);
                li{
                    float: left;
                    margin-right:r(55px);
                    &:last-child{
                        margin: 0 ;
                    }
                    a{
                        width: r(135px);
                        height: r(135px);
                        display: block;
                        img{
                            width: 100%;
                        }
                    }
                }
            }
        }
        .movie {
            width: 100%;
            padding-top: r(34px);
            padding-bottom: r(5px);
            .movie_left {
                vertical-align: middle;
                img {
                    vertical-align: middle;
                    width: r(53px);
                    height: r(52px);
                    margin-left: r(21px);
                }
                span {
                    font-size: r(30px);
                    vertical-align: middle;
                    margin-left: r(8px);
                }
            }
            .movie_right {
                vertical-align: middle;
                img {
                    width: r(25px);
                    height: r(26px);
                    vertical-align: middle;
                    margin-right: r(21px);
                }
                span {
                    font-size: r(24px);
                    vertical-align: middle;
                }
            }
        }
        .movie_list{
            ul{
                padding: 0 r(22px);
                margin-top: r(37px);
                margin-bottom: r(35px);
                li{
                    float: left;
                    margin-right:r(55px);
                    &:last-child{
                        margin: 0 ;
                    }
                    a{
                        width: r(135px);
                        height: r(135px);
                        display: block;
                        img{
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
}